<template>
	<view class="app">
		<view style="height: 120rpx"></view>
		<view class="headbox">
			<view class="headbox_img"><image :src="avatar" alt="" /></view>
			<view class="headbox_title">
				<view class="title">{{ username }}</view>
				<view class="vip">
					<text v-if="personalList.isVip">SVIP</text>

					<!-- <image
            v-if="personalList.isVip"
            src="/static/images/personal/isVip.png"
            alt=""
          />
          <image v-else src="/static/images/personal/noVip.png" alt="" /> -->
				</view>
			</view>
			<view class="headbox_detail">
				<view>{{ personalList.focus }} 关注</view>
				<text>|</text>
				<view>{{ personalList.fans }} 粉丝</view>
				<text>|</text>
				<view class="headbox_level">
					<image src="/static/images/personal/level.png" alt="" />
					<text>{{ personalList.level }}</text>
				</view>
			</view>
		</view>

		<view class="my_musicList">
			<view class="my_title">
				<text>我的歌单</text>
				<view class="my_more">更多></view>
			</view>
			<view class="myList_con">
				<view class="myList_con_des" :style="index == 0 ? 'margin:0;' : ''" v-for="(item, index) in myMusicList" :key="index">
					<image :src="item.cover" mode="scaleToFill" />
					<view class="myList_con_des_detail">{{ item.title }}</view>
				</view>
			</view>
		</view>

		<view class="my_music">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/56ede264-377d-411f-bb60-a4c15ef34e0d.jpg" mode="scaleToFill" />
			<view class="my_music_tile">
				<text style="font-size: 32rpx" @click="pauseMusic">我喜欢的音乐</text>
				<text style="color: #8a8a8a; font-size: 26rpx; margin-top: 8rpx">155首</text>
			</view>
			<view class="my_music_btn">
				<view><u-icon name="heart-fill" color="rgb(213, 1, 1)" size="16"></u-icon></view>
				<text @click="playMusic">心动模式</text>
			</view>
		</view>

		<view class="like">
			<view class="like_title">
				<text>收藏的歌单</text>
				<view class="like_more"><image src="/static/images/personal/more.png" mode="scaleToFill" /></view>
			</view>
			<view class="like_con" v-for="(item, index) in likeMusicList" :key="index">
				<image class="titleImg" :src="item.cover" mode="scaleToFill" />
				<view class="con_title">
					<text class="con_title_con">{{ item.title }}</text>
					<text class="con_title_des">{{ item.musicNum }}，{{ item.author }}</text>
				</view>
				<image class="moreImg" src="/static/images/personal/more.png" mode="scaleToFill" />
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
	...mapGetters([ "avatar", "username"]),
  },
  created() {
  },
  data() {
    return {
      // 用户基本信息
	  UserInfo:{},
      personalList: {
        headImg:
          "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/baf658cc-b4af-4a54-a20e-44c8e87026c0.png",
        username: "Mimen-y",
        focus: 11,
        fans: 11,
        level: 8,
        isVip: true,
      },
      // 我的歌单
      myMusicList: [
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/2b2181fb-bafc-4b0f-9d84-afdeb76933e3.jpg",
          title: "【R&B】慵懒的感觉非常舒服",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/b630f03c-bed2-4681-b2c9-42145545ff09.jpg",
          title: "【R&B】慵懒的感觉非常舒服",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/baf658cc-b4af-4a54-a20e-44c8e87026c0.png",
          title: "【R&B】慵懒的感觉非常舒服",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/b630f03c-bed2-4681-b2c9-42145545ff09.jpg",
          title: "听说把糖放在枕头底下会做一个甜甜的梦",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/b630f03c-bed2-4681-b2c9-42145545ff09.jpg",
          title: "听说把糖放在枕头底下会做一个甜甜的梦",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/baf658cc-b4af-4a54-a20e-44c8e87026c0.png",
          title: "听说把糖放在枕头底下会做一个甜甜的梦",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/baf658cc-b4af-4a54-a20e-44c8e87026c0.png",
          title: "听说把糖放在枕头底下会做一个甜甜的梦",
        },
      ],
      // 收藏的歌单
      likeMusicList: [
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/b630f03c-bed2-4681-b2c9-42145545ff09.jpg",
          title: "熟悉却不知名字的英文歌曲",
          musicNum: 134,
          author: "Mimen-y",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/b630f03c-bed2-4681-b2c9-42145545ff09.jpg",
          title: "熟悉却不知名字的英文歌曲",
          musicNum: 134,
          author: "Mimen-y",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/56ede264-377d-411f-bb60-a4c15ef34e0d.jpg",
          title: "熟悉却不知名字的英文歌曲",
          musicNum: 134,
          author: "Mimen-y",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/baf658cc-b4af-4a54-a20e-44c8e87026c0.png",
          title: "熟悉却不知名字的英文歌曲",
          musicNum: 134,
          author: "Mimen-y",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/b630f03c-bed2-4681-b2c9-42145545ff09.jpg",
          title: "熟悉却不知名字的英文歌曲",
          musicNum: 134,
          author: "Mimen-y",
        },
        {
          cover:
            "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/56ede264-377d-411f-bb60-a4c15ef34e0d.jpg",
          title: "熟悉却不知名字的英文歌曲",
          musicNum: 134,
          author: "Mimen-y",
        },
      ],
    };
  },
  methods: {
    playMusic() {
      uni.navigateTo({
        url: "/pages/music/music",
      });
    },
    pauseMusic() {
      this.muteBgMusic = !this.muteBgMusic;
      if (this.muteBgMusic) {
        // 开启静音
        this.$music.playBgm({ mute: true });
      } else {
        // 关闭 静音
        this.$music.playBgm({ mute: false });
      }
    },
  },
};
</script>

<style lang="scss">
.app {
	height: auto;
	background-color: #eee;
	display: flex;
	flex-direction: column;
	align-items: center;
	.headbox {
		width: 680rpx;
		height: 256rpx;
		background: #fff;
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.headbox_img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 100%;
			background-color: rgb(141, 142, 145);
			margin-top: -100rpx;
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 100%;
			}
		}
		.headbox_title {
			height: 86rpx;
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			.title {
				font-size: 46rpx;
				font-weight: 800;
			}
			.vip {
				margin-top: 20rpx;
				margin-left: 20rpx;
				border-radius: 20rpx;
				width: 90rpx;
				height: 36rpx;
				text-align: center;
				background: rgb(255, 222, 102);
				text {
					color: rgb(213, 1, 1);
					line-height: 28rpx;
					font-weight: 600;
				}
			}
		}
		.headbox_detail {
			height: 80rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			font-size: 30rpx;
			text {
				margin: 0 16rpx;
				color: #eee;
			}

			.headbox_level {
				margin-top: -10rpx;
				text {
					font-weight: 800;
					margin-left: -15rpx;
					color: #000;
					font-size: 28rpx;
				}
				image {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}
	}

	.my_musicList {
		margin-top: 24rpx;
		border-radius: 18rpx;
		width: 632rpx;
		// width: 680rpx;
		height: auto;
		background: #fff;
		padding: 0rpx 24rpx;
		.my_title {
			width: 620rpx;
			height: 80rpx;
			line-height: 110rpx;
			text-align: center;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text {
				font-size: 32rpx;
				font-weight: 550;
			}
			.my_more {
				width: 100rpx;
				height: 40rpx;
				border: 1px solid #eee;
				border-radius: 22rpx;
				font-size: 22rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}
		.myList_con {
			margin-top: 8rpx;
			width: 620rpx;
			height: 252rpx;
			display: flex;
			flex-wrap: nowrap;
			overflow: auto;
			.myList_con_des {
				margin-left: 28rpx;
				width: 158rpx;
				height: 220rpx;
				font-size: 20rpx;
				display: flex;
				flex-direction: column;
				image {
					margin-bottom: 10rpx;
					border-radius: 18rpx;
					width: 168rpx;
					height: 168rpx;
				}
				.myList_con_des_detail {
					font-size: 20rpx;
					line-height: 28rpx;
					width: 156rpx;
					height: 54rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
		}
	}

	.my_music {
		margin-top: 24rpx;
		height: 140rpx;
		width: 640rpx;
		// width: 680rpx;
		border-radius: 18rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		image {
			border-radius: 18rpx;
			width: 120rpx;
			height: 120rpx;
		}
		.my_music_tile {
			display: flex;
			flex-direction: column;
			width: 300rpx;
		}
		.my_music_btn {
			width: 166rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			height: 50rpx;
			border-radius: 22rpx;
			border: 2rpx solid #eee;
		}
	}

	.like {
		margin-top: 24rpx;
		border-radius: 18rpx;
		width: 632rpx;
		// width: 680rpx;
		height: auto;
		background: #fff;
		padding: 5rpx 24rpx;
		margin-bottom: 28rpx;
		padding-top: 0;
		.like_title {
			width: 620rpx;
			height: 100rpx;
			line-height: 110rpx;
			text-align: center;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text {
				font-size: 32rpx;
				font-weight: 550;
			}
			.like_more {
				width: 56rpx;
				height: 64rpx;
				image {
					width: 56rpx;
					height: 58rpx;
				}
			}
		}
		.like_con {
			width: 620rpx;
			height: 140rpx;
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			.titleImg {
				width: 110rpx;
				height: 110rpx;
				border-radius: 18rpx;
			}
			.con_title {
				width: 440rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 14rpx 0;
				padding-bottom: 34rpx;
				margin-left: 16rpx;
				.con_title_con {
					font-size: 32rpx;
					font-weight: 500;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.con_title_des {
					color: #8a8a8a;
					font-size: 26rpx;
				}
			}
			.moreImg {
				width: 56rpx;
				height: 58rpx;
			}
		}
	}
}
</style>
